<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { get } from '@/utils/service'
import { VUE_APP_BASE_API } from '@/utils/baseConfig'
const active = ref('-1')
const noRecommendCustomerEmpty = ref(false)
const nocustomerEmpty = ref(false)
const router = useRoute()
const recommendCustomer = ref({})
const customer = ref({})
const customerTracks = ref([])
const arrowDirection = ref('down')
const showUsed = ref(false)
const customerId = (router.query.customerId as string) || 0
onMounted(async () => {
  try {
    getByCustomerId(customerId)
  } catch (error) {
    console.log('onMounted error:' + error)
  }
})
function onClickLeft() {
  window.history.back()
}
function onClickTag(obj: object) {
  active.value = obj.name
}
function getByCustomerId(customerId: string) {
  get('/recommendCustomerWechatNew/queryByRecommendCustomerDetail', {
    reccomendCustomerId: customerId,
  }).then((res) => {
    if (res.code === 0) {
      const data = res.data
      customerTracks.value = data.customerTracks
      if (
        data.recommendCustomer == null ||
        data.recommendCustomer == undefined ||
        data.recommendCustomer == ''
      ) {
        noRecommendCustomerEmpty.value = true
      }
      recommendCustomer.value = data.recommendCustomer
      if (data.customer == null || data.customer == undefined || data.customer == '') {
        nocustomerEmpty.value = true
      }
      customer.value = data.customer
      customer.value.showUsed = true
    } else {
      noRecommendCustomerEmpty.value = true
      nocustomerEmpty.value = true
    }
  })
}
//显示套餐历史使用记录
function openViewUsed() {
  if (showUsed.value == false) {
    showUsed.value = true
    arrowDirection.value = 'up'
  } else {
    showUsed.value = false
    arrowDirection.value = 'down'
  }
}
</script>
<template>
  <van-nav-bar title="推荐客户-明细" left-text="返回" left-arrow @click-left="onClickLeft" />
  <br />
  <van-tabs
    v-model:active="active"
    type="card"
    style="width: 100%"
    title-active-color="#FFF"
    color="#c82030"
    title-inactive-color="#c82030"
    @click-tab="onClickTag"
    sticky
  >
    <van-tab title="推荐客户" name="-1">
      <van-empty
        v-if="noRecommendCustomerEmpty == true"
        :image="VUE_APP_BASE_API + '/images/vue/noData.png'"
        image-size="100"
        description="无推荐客户"
      />
      <div class="recommendCustomerContent" v-if="noRecommendCustomerEmpty == false">
        <div class="recommendCustomerHeadr">
          <div class="recommendCustomerTitle">姓名：{{ recommendCustomer.name || 无 }}</div>
          <div class="recommendCustomerTitle">联系电话：{{ recommendCustomer.mobilePhone }}</div>
        </div>
        <div class="recommendCustomerInnerItem">
          <div class="recommendCustomerInnerItemImg">
            <img :src="VUE_APP_BASE_API + '/images/vue/recommendCar.png'" />
          </div>
          <div class="recommendCustomerInnerItemContent">
            <van-cell-group
              style="
                --van-cell-line-height: 18px;
                --van-cell-label-font-size: 12px;
                --van-cell-vertical-padding: 6px;
                --van-cell-value-font-size: 12px;
              "
            >
              <van-cell title="推荐时间" :value="recommendCustomer.recommendDate" />
              <van-cell
                title="门店"
                :value="recommendCustomer.acceptEnterpriseName || '无'"
                ellipsis
                class="van-cell"
              />
              <van-cell title="品牌" :value="recommendCustomer.brandName || '无'" />
              <van-cell
                title="审批状态"
                :value="recommendCustomer.approvalStatusName"
                style="--van-cell-value-color: var(--main-color)"
              />
              <van-cell
                title="交易状态"
                :value="recommendCustomer.tradeStatusName"
                style="--van-cell-value-color: var(--main-color)"
              />
            </van-cell-group>
          </div>
        </div>
        <div>
          <hr class="hrdashed" />
          <van-cell-group
            v-if="recommendCustomer.approvalStatus >= 2"
            style="
              --van-cell-line-height: 18px;
              --van-cell-label-font-size: 12px;
              --van-cell-value-font-size: 12px;
            "
          >
            <van-cell
              title="审批人"
              :value="recommendCustomer.approvalUser"
              title-class="title-class"
              value-class="value-class"
            />
            <van-cell title="审批时间 " :value="recommendCustomer.approvalDate" />
            <div v-if="recommendCustomer.approvalStatus == 3">
              <van-cell title="无效原因" :value="recommendCustomer.flowReasonName" />
              <van-cell title="备注" :value="recommendCustomer.flowNote || '无'" />
            </div>
            <div v-if="recommendCustomer.tradeStatus == 2">
              <van-cell title="成交时间" :value="recommendCustomer.fileTime" />
            </div>
          </van-cell-group>
        </div>
      </div>
    </van-tab>
    <van-tab title="客户档案" name="1"
      ><!--客户档案信息-->
      <van-empty
        v-if="nocustomerEmpty == true"
        :image="VUE_APP_BASE_API + '/images/vue/noData.png'"
        image-size="100"
        description="无客户档案信息"
      />
      <div class="recommendCustomerContent" v-if="nocustomerEmpty == false">
        <div class="recommendCustomerHeadr">
          <div class="recommendCustomerTitle">姓名：{{ customer.name || 无 }}</div>
          <div class="recommendCustomerTitle">联系电话：{{ customer.mobilePhone }}</div>
        </div>
        <div class="recommendCustomerInnerItem">
          <div class="recommendCustomerInnerItemImg">
            <img :src="VUE_APP_BASE_API + '/images/vue/recommendCar.png'" />
          </div>
          <div class="recommendCustomerInnerItemContent">
            <van-cell-group
              style="
                --van-cell-line-height: 18px;
                --van-cell-label-font-size: 12px;
                --van-cell-vertical-padding: 6px;
                --van-cell-value-font-size: 12px;
              "
            >
              <van-cell title="登记时间" :value="customer.createFolderTime" />
              <van-cell
                title="品牌"
                :value="
                  customer.brandName + '' + customer.carSeriyName + '' + customer.carModelName
                "
              />
              <van-cell title="意向级别" :value="customer.customerPhaseName" />
              <van-cell title="回访次数" :value="customer.trackNum" />
              <van-cell title="销售顾问" :value="customer.bussiStaff" />
            </van-cell-group>
          </div>
        </div>
        <div>
          <hr class="hrdashed" />
          <van-cell-group
            style="
              --van-cell-line-height: 18px;
              --van-cell-label-font-size: 12px;
              --van-cell-value-font-size: 12px;
            "
          >
            <van-cell
              title="客户状态"
              :value="customer.lastResultName"
              title-class="title-class"
              value-class="value-class"
            />
            <van-cell title="订单状态 " :value="customer.orderStateName || '无'" />
            <van-cell title="订单时间 " :value="customer.orderTime || '无'" />
            <van-cell title="交车时间 " :value="customer.successDate || '无'" />
            <div v-if="customer.lastResult == 2">
              <van-cell title="流失时间" :value="customer.approvalTime" />
              <van-cell title="流失原因" :value="customer.customerFlowReasonName" />
              <van-cell title="流失备注" :value="customer.flowNote || '无'" />
            </div>
            <van-cell
              @click="openViewUsed()"
              title="回访记录"
              :icon="VUE_APP_BASE_API + '/images/vue/more.png'"
              is-link
              :arrow-direction="arrowDirection"
            />
            <div
              :class="'memberCardUsedContent' + (showUsed == true ? '  animate-fade' : '')"
              v-if="showUsed == true"
            >
              <div class="memberCardUsedItem" v-for="customerTrack in customerTracks">
                <van-cell-group>
                  <van-cell title="回访时间" :value="customerTrack.trackDate" />
                  <van-cell
                    title="回访后级别"
                    :value="customerTrack.afterCustomerPhaseName"
                    style="
                      --van-cell-value-font-size: 16px;
                      --van-cell-value-color: var(--main-color);
                    "
                  />
                  <van-cell title="销售顾问" :value="customerTrack.userName" />
                  <van-cell title="回访内容" :value="customerTrack.trackContent" />
                </van-cell-group>
              </div>
            </div>
          </van-cell-group>
        </div>
      </div>
    </van-tab>
  </van-tabs>

  <br />
</template>
